<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 校园二手交易平台</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/components/navbar.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/profile.css">
</head>

<body>
    <!-- 导航栏 -->
    <!-- <nav class="navbar">
        <div class="navbar-container">
            <a href="/" class="navbar-brand">校园二手交易平台</a>
            <div class="navbar-menu">
                <a href="/products.html" class="navbar-link">商品列表</a>
                <a href="/profile.html" class="navbar-link">个人中心</a>
                <div class="user-info">

                </div>
            </div>
        </div>
    </nav> -->
    <div id="navbar-container"></div>

    <!-- 主要内容 -->
    <div class="container">
        <div id="profile-message" class="message" style="display: none;"></div>

        <div class="profile-container">
            <!-- 侧边栏 -->
            <div class="profile-sidebar">
                <ul class="profile-menu">
                    <li class="profile-menu-item active" data-section="profile" onclick="switchSection('profile')">
                        个人资料
                    </li>
                    <li class="profile-menu-item" data-section="published" onclick="switchSection('published')">
                        已发布商品
                    </li>
                    <li class="profile-menu-item" data-section="favorites" onclick="switchSection('favorites')">
                        收藏商品
                    </li>
                    <li class="profile-menu-item" data-section="transactions" onclick="switchSection('transactions')">
                        交易记录
                    </li>
                </ul>
            </div>

            <!-- 内容区域 -->
            <div class="profile-content">
                <!-- 个人资料 -->
                <div id="profile-section" class="profile-section active">
                    <div class="section-header">
                        <h2 class="section-title">个人资料</h2>
                    </div>
                    <div class="profile-page">
                        <!-- 个人信息主体 -->
                        <div class="profile-page-container">
                            <!-- 头部信息 -->
                            <div class="profile-page-header">
                                <img alt="头像" class="profile-page-avatar" id="avatar">
                                <h4 id="nickname"></h4>
                                <p class="mb-0" id="userEmail">test@pku.edu.cn</p>
                            </div>

                            <!-- 个人信息部分 -->
                            <div class="profile-page-section">
                                <h5 class="section-title">
                                    <i class="bi bi-person-badge"></i> 基本信息
                                </h5>

                                <!-- 自我描述 -->
                                <div class="info-item">
                                    <span class="info-label">自我描述</span>
                                    <div class="info-content">
                                        <span id="userDescText"></span>
                                        <button class="btn-edit ms-2" id="editDescBtn">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="descEditGroup" style="display: none;">
                                    <textarea id="descInput" class="edit-input" rows="3"></textarea>
                                    <div class="d-flex justify-content-end">
                                        <button class="btn btn-sm btn-outline-secondary me-2"
                                            id="cancelDescBtn">取消</button>
                                        <button class="btn btn-sm btn-primary" id="saveDescBtn">保存</button>
                                    </div>
                                </div>

                                <!-- 交易地址 -->
                                <div class="info-item">
                                    <span class="info-label">常用交易地址</span>
                                    <div class="info-content">
                                        <span id="addressText"></span>
                                        <button class="btn-edit ms-2" id="editAddressBtn">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                    </div>
                                </div>
                                <div id="addressEditGroup" style="display: none;">
                                    <input type="text" id="addressInput" class="edit-input" placeholder="请输入常用交易地址">
                                    <div class="d-flex justify-content-end">
                                        <button class="btn btn-sm btn-outline-secondary me-2"
                                            id="cancelAddressBtn">取消</button>
                                        <button class="btn btn-sm btn-primary" id="saveAddressBtn">保存</button>
                                    </div>
                                </div>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="profile-page-section text-center">
                                <button class="btn btn-primary-custom mb-2" id="changeAvatarBtn">
                                    <i class="bi bi-camera me-2"></i>更换头像
                                </button>
                                <input type="file" id="avatarUpload" accept="image/*" class="d-none">

                                <button class="btn btn-primary-custom w-100 mt-3" id="publishBtn">
                                    <i class="bi bi-plus-circle me-2"></i>发布新商品
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 已发布商品 -->
                <div id="published-section" class="profile-section">
                    <div class="section-header">
                        <h2 class="section-title">已发布商品</h2>
                    </div>
                    <div class="products-grid">
                        <!-- 商品卡片将由JavaScript动态填充 -->
                    </div>
                </div>

                <!-- 收藏商品 -->
                <div id="favorites-section" class="profile-section">
                    <div class="section-header">
                        <h2 class="section-title">收藏商品</h2>
                    </div>
                    <div class="products-grid">
                        <!-- 商品卡片将由JavaScript动态填充 -->
                    </div>
                </div>

                <!-- 交易记录 -->
                <div id="transactions-section" class="profile-section">
                    <div class="section-header">
                        <h2 class="section-title">交易记录</h2>
                    </div>
                    <div class="transaction-list">
                        <!-- 交易记录将由JavaScript动态填充 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/profile.js"></script>

    <script>
        $(function () {
            $("#navbar-container").load("/components/navbar.html");
        });
    </script>
</body>

</html>